<template>
  <view
    class="tz-input"
    :class="[{ 'tz-input__clear': clearable }, $attrs.class]"
  >
    <tz-icon v-if="prefixIcon" class="prefix-icon" :name="prefixIcon"></tz-icon>
    <custom-wrapper>
      <input
        v-bind="{ ...$attrs, class: inputClass }"
        :value="modelValue"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
      />
    </custom-wrapper>
    <tz-icon v-if="suffixIcon" class="suffix-icon" :name="suffixIcon">
    </tz-icon>
    <tz-icon
      v-if="canClearable"
      class="tz-input-icon"
      name="close"
      @touchstart.stop="handleClear"
    ></tz-icon>
  </view>
</template>
<script>
import { computed, ref, watch } from "vue";
export default {
  name: "TzInput",
  components: {},
  inheritAttrs: false,
  props: {
    modelValue: {
      type: [String, Number],
      required: true,
      default: "",
    },
    inputClass: {
      type: String,
      default: "",
    },
    clearable: {
      type: Boolean,
      default: false,
    },
    suffixIcon: {
      type: String,
      default: "",
    },
    prefixIcon: {
      type: String,
      default: "",
    },
    rules: {
      type: Function,
      default: undefined,
    },
  },
  emits: ["update:modelValue", "clear", "input"],
  setup(props, { emit, attrs }) {
    const isEempty = ref(!props.modelValue);
    const isFocus = ref(false);

    watch(
      () => props.modelValue,
      (val) => {
        //如果存在maxlength并且超出该限制
        if (attrs.maxlength && val) {
          const _maxlength = parseInt(attrs.maxlength, 10);
          if (_maxlength < val.length) {
            const value = val.slice(0, _maxlength);
            emit("update:modelValue", value);
          }
        }
        //自定义rules校验规则
        if (props.rules) {
          const value = props.rules(val);
          emit("update:modelValue", value);
        }
      }
    );

    //监听显示清空icon条件c
    const canClearable = computed(() => {
      return !isEempty.value && props.clearable && isFocus.value;
    });

    const handleInput = (e) => {
      const value = e.target.value;
      emit("update:modelValue", value);
      isEempty.value = !value || value.length <= 0;
      emit("input", e);
    };

    const handleFocus = (e) => {
      const value = e.target.value;
      isEempty.value = !value || value.length <= 0;
      isFocus.value = true;
    };

    const handleBlur = () => {
      isFocus.value = false;
    };

    //清空回调
    const handleClear = () => {
      isEempty.value = true;
      emit("update:modelValue", "");
      emit("clear", "");
    };
    return {
      handleInput,
      canClearable,
      handleClear,
      handleFocus,
      handleBlur,
      isFocus,
    };
  },
};
</script>

<style lang="scss">
.tz-input {
  position: relative;
  line-height: 44px;
  width: 100%;
  font-size: 17px;
  text-align: left;
  display: flex;
  align-items: center;

  custom-wrapper {
    width: 100%;
  }

  &__clear {
    display: flex;
    align-items: center;
  }
  .prefix-icon,
  .suffix-icon {
    vertical-align: middle;
    margin: 0 5px;
    font-size: inherit;
  }
  .tz-input-icon {
    color: $text-color;
    padding: 0px 5px 1px 6px;
    font-size: 20px;
    cursor: pointer;
  }

  .h5-input {
    min-height: 44px;
    flex: 1;
  }

  taro-input-core {
    width: 100%;
  }

  .weui-input {
    height: unset;
    line-height: inherit;
    min-width: 0;
    resize: none;
  }

  input {
    &::-webkit-input-placeholder,
    ::-moz-placeholder,
    :-moz-placeholder,
    :-ms-input-placeholder {
      color: $placeholder-color;
    }
  }
}
</style>
